.weg-item {
  transition: width, height, 100ms cubic-bezier(0.25, 1, 0.5, 1);
}

@mixin dock-item-style($multiplier) {
  &:not(.media-session-container) {
    --range: calc(var(--config-item-zoom-size) - var(--config-item-size));
    --size: calc(var(--config-item-size) + (var(--range) * #{$multiplier}));
    width: var(--size);
    height: var(--size);
  }
}

/* Avoid animations when dragging items, like this causes janky behavior */
body:not(.dragging-items) {
  .weg-item-drag-container {
    /* prev prev of hovered */
    &:has(+ .weg-item-drag-container + .weg-item-drag-container:hover) .weg-item {
      @include dock-item-style(0.3);
    }

    /* prev of hovered */
    &:has(+ .weg-item-drag-container:hover) .weg-item {
      @include dock-item-style(0.7);
    }

    &:hover {
      /* hovered */
      .weg-item {
        @include dock-item-style(1);
      }

      /* next of hovered */
      + .weg-item-drag-container .weg-item {
        @include dock-item-style(0.7);
      }

      /* next next of hovered */
      + .weg-item-drag-container + .weg-item-drag-container .weg-item {
        @include dock-item-style(0.3);
      }
    }
  }
}

/* This will act like a hitbox for items */
.weg-item::before {
  content: "";
  position: absolute;
  // border: solid 1px red;
}

.vertical .weg-item::before {
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% + var(--config-padding) + var(--config-margin));
  height: calc(100% + var(--config-space-between-items));
}

.horizontal .weg-item::before {
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + var(--config-space-between-items));
  height: calc(100% + var(--config-padding) + var(--config-margin));
}

.bottom .weg-item::before {
  top: 0;
}

.top .weg-item::before {
  bottom: 0;
}

.left .weg-item::before {
  right: 0;
}

.right .weg-item::before {
  left: 0;
}
